{#
/**
 * @file
 * Theme override for comments.
 *
 * Available variables:
 * - author: Comment author. Can be a link or plain text.
 * - content: The content-related items for the comment display. Use
 *   {{ content }} to print them all, or print a subset such as
 *   {{ content.field_example }}. Use the following code to temporarily suppress
 *   the printing of a given child element:
 *   @code
 *   {{ content|without('field_example') }}
 *   @endcode
 * - created: Formatted date and time for when the comment was created.
 *   Preprocess functions can reformat it by calling DateFormatter::format()
 *   with the desired parameters on the 'comment.created' variable.
 * - changed: Formatted date and time for when the comment was last changed.
 *   Preprocess functions can reformat it by calling DateFormatter::format()
 *   with the desired parameters on the 'comment.changed' variable.
 * - permalink: Comment permalink.
 * - submitted: Submission information created from author and created
 *   during template_preprocess_comment().
 * - user_picture: The comment author's profile picture.
 * - status: Comment status. Possible values are:
 *   unpublished, published, or preview.
 * - title: Comment title, linked to the comment.
 * - attributes: HTML attributes for the containing element.
 *   The attributes.class may contain one or more of the following classes:
 *   - comment: The current template type; for instance, 'theming hook'.
 *   - by-anonymous: Comment by an unregistered user.
 *   - by-{entity-type}-author: Comment by the author of the parent entity,
 *     eg. by-node-author.
 *   - preview: When previewing a new or edited comment.
 *   The following applies only to viewers who are registered users:
 *   - unpublished: An unpublished comment visible only to administrators.
 * - title_prefix: Additional output populated by modules, intended to be
 *   displayed in front of the main title tag that appears in the template.
 * - title_suffix: Additional output populated by modules, intended to be
 *   displayed after the main title tag that appears in the template.
 * - content_attributes: List of classes for the styling of the comment content.
 * - title_attributes: Same as attributes, except applied to the main title
 *   tag that appears in the template.
 * - threaded: A flag indicating whether the comments are threaded or not.
 *
 * These variables are provided to give context about the parent comment (if
 * any):
 * - parent_comment: Full parent comment entity (if any).
 * - parent_author: Equivalent to author for the parent comment.
 * - parent_created: Equivalent to created for the parent comment.
 * - parent_changed: Equivalent to changed for the parent comment.
 * - parent_title: Equivalent to title for the parent comment.
 * - parent_permalink: Equivalent to permalink for the parent comment.
 * - parent: A text string of parent comment submission information created from
 *   'parent_author' and 'parent_created' during template_preprocess_comment().
 *   This information is presented to help screen readers follow lengthy
 *   discussion threads. You can hide this from sighted users using the class
 *   visually-hidden.
 *
 * These two variables are provided for context:
 * - comment: Full comment object.
 * - commented_entity: Entity the comments are attached to.
 *
 * @see template_preprocess_comment()
 */
#}

{# 计算评论深度和相关样式类 #}
{% set depth = depth ?? 0 %}
{% set max_depth = 5 %} {# 限制最大显示深度 #}
{% set current_depth = depth < max_depth ? depth : max_depth %}

{# 评论容器样式类 - 基于深度的缩进和间距 #}
{% set container_classes = [
  'comment',
  'relative',
  'transition-all',
  'duration-300',
  'pb-4',
  current_depth > 0 ? 'pl-' ~ (current_depth * 6) : 'pl-0',
  depth > 0 ? 'mt-3' : 'mt-6',
  'hover:bg-sky-50',
] %}

<div{{ attributes.addClass(container_classes).setAttribute('role', 'comment') }}>
  {# 层级视觉指示器 - 竖线和节点 #}
  {% if current_depth > 0 %}
    <div class="comment-thread-indicators absolute left-0 top-0 h-full">
      {# 主竖线 - 连接到父评论 #}
      <div class="absolute left-2 top-6 bottom-0 w-0.5 bg-sky-200"></div>
      
      {# 层级节点 - 显示当前层级位置 #}
      <div class="absolute left-2 top-4 w-2 h-2 rounded-full bg-sky-500 ring-2 ring-white"></div>
      
      {# 额外层级线 - 当深度超过1时显示 #}
      {% for i in 1..current_depth - 1 %}
        <div class="absolute left-{{ (i * 6) - 1 }} top-0 bottom-0 w-0.5 bg-sky-100"></div>
      {% endfor %}
    </div>
  {% endif %}

  <div class="comment-content bg-white rounded-sm border-l-2 border-gray-200 p-4 ">
    {# 评论头部 - 作者和日期 #}
    <div class="flex flex-wrap items-center justify-between mb-3">
      <div class="flex items-center space-x-3">
        {# 作者头像 - 如果有 #}
        {% if content.author_picture %}
          <div class="comment-author-picture w-8 h-8 rounded-full overflow-hidden border border-sky-200">
            {{ content.author_picture }}
          </div>
        {% endif %}
        
        {# 作者名称、评论日期、状态 #}
        <div>
          <div class="flex items-center space-x-2">
            {% if content.author %}
              <span class="font-medium">{{ content.author }}</span>
            {% else %}
              <span class="font-medium">{{ author }}</span>
            {% endif %}
            <span class="mx-1">{{ created }}</span>
            {% if status == 'published' %}
              <span class="text-xs px-2 py-0.5 bg-sky-100 text-sky-500 rounded-full">
                {{ 'Published'|t }}
              </span>
            {% else %}
              <span class="text-xs px-2 py-0.5 bg-gray-100 text-gray-800 rounded-full">
                {{ 'Unpublished'|t }}
              </span>
            {% endif %}
          </div>
        </div>
      </div>
    </div>

    {# 评论标题 #}
    {% if title %}
      <h3 class="font-semibold mb-2">
        {{ title }}
      </h3>
    {% endif %}

    {# 评论主体内容 - 使用自定义字段模板 #}
    <div class="comment-body text-gray-500 mb-4">
      {{ content|without("links") }}
    </div>

    {# 评论操作链接 - 回复、编辑等 #}
    {% if content.links %}
      <div class="comment-links inline-flex justify-center text-sm border-t pt-3 gap-3">
        {{ content.links }}
      </div>
    {% endif %}
  </div>

  {# 递归渲染子评论 - 自动增加深度 #}
  {% if children %}
    <div class="comment-children mt-2">
      {{ children }}
    </div>
  {% endif %}
</div>